<template>
  <div>
    <div style="margin: 10px 0; max-width: calc(100vw - 220px);padding-left: 10px;padding-bottom:15px">
      <el-select class="input" v-model="timeRange" placeholder="请选择" @change="load">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
      </el-select>
    </div>
    <el-card>
      <div id="line" style="width:100%;height:400px"></div>
    </el-card>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import * as echarts from 'echarts';
import request from "@/utils/request";
//统计各类别的销量
const option = {
  title: {
    text: '文创产品销量与收入统计折线图',
    x:'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  //折线名
  legend: [
    {
      top:'5%',
      right:'30%',
      data: ['当日销量']//这里改为消费者名称
    },
    {
      top:'5%',
      right:'20%',
      data:['总收入']
    }],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  //x坐标轴 data[]得从后台获取
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],  //从后台动态获取
    position:'bottom'
  },
  //y坐标轴
  yAxis: [{
    type: 'value',
    name:'当日销量',
    min:'',
    max:'',
    interval:'', //标轴分割间隔
    splitNumber:6,//设置坐标轴的分割段数
    axisLabel: {
      formatter: function(v) {
        return v.toFixed(1); //0表示小数为0位，1表示1位小数，2表示2位小数
      },
      color: function(value, index) {
        return value >= 7 ? "red" : "green";
      }
    }
  },{
    type:'value',
    name:'总收入',
    min:'',
    max:'',
    interval:'', //标轴分割间隔
    // interval:10,//强制设置坐标轴分割间隔
    splitNumber:6,

    axisLabel: {
      formatter: function(v) {
        return v.toFixed(1); //0表示小数为0位，1表示1位小数，2表示2位小数
      },
      color: function(value, index) {
        return value >= 100 ? "red" : "green";
      }
    }
  }],
  series: [
    {
      name: '当日销量',
      type: 'line',
      stack: 'Total',
      // areaStyle:{},
      smooth: true,
      emphasis:{
        focus:'series'
      },
      label: {
        show: true,
        position: 'top'
      },
      data: [] //从后台动态获取
    },
    {
      name: '总收入',
      type: 'line',
      stack: 'Total',
      smooth: true,
      yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
      // areaStyle:{},
      emphasis:{
        focus:'series'
      },
      label: {
        show: true,
        position: 'top'
      },
      data: [] //从后台动态获取
    },
  ]
};
export default {
  name: "OrderLineChart",
  data(){
    return{
      admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) :{},
      lineBox:null,
      timeRange:'week',
      options:[
        {label:'最近一周',value:'week'},
        {label:'最近一个月',value:'month'},
        {label:'最近两个月',value:'month2'},
        {label:'最近三个月',value:'month3'},
      ],
      data1:[],//y轴左侧
      data2:[]//y轴右侧
    }
  },
  mounted() {//等页面元素全部初始化好
    this.load()
  },
  methods:{
    load(){
      if(!this.lineBox){
        this.lineBox = echarts.init(document.getElementById('line'))//初始化echarts容器
      }

      //从后台获取数据
      request.get('/order/lineCharts/' + this.timeRange).then(res => {
        option.xAxis.data = res.data.date
        option.yAxis[0].max=this.calMax(res.data.sales)
        option.yAxis[0].min=this.calMin(res.data.sales)
        option.yAxis[0].interval=(this.calMax(res.data.sales)-this.calMin(res.data.sales))/6
        option.series[0].data = res.data.sales //销量
        option.yAxis[1].max=this.calMax(res.data.prices)
        option.yAxis[1].min=this.calMin(res.data.prices)
        option.yAxis[1].interval=(this.calMax(res.data.prices)-this.calMin(res.data.prices))/6
        option.series[1].data = res.data.prices
        this.lineBox.setOption(option)  //设置容器的属性值,当数据发生变化时,一定要重新setOption
      })
    },
    calMax(arr){
      var max = Math.max.apply(null, arr); // 获取最大值方法
      var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
      var maxval = maxint * 5 + 25; // 最终设置的最大值
      return maxval; // 输出最大值
    },
    calMin(arr){
      var min = Math.min.apply(null, arr); // 获取最小值方法
      var minint = Math.floor(min / 1); // 向下以1的倍数取整
      var minval = minint * 1; // 最终设置的最小值
      return minval; // 输出最小值
    }
  }
}
</script>

<style scoped>

</style>